import { createApp } from 'vue'
import MessageBoxComp from './MessageBox.vue'

interface MessageBoxProps {
  title: string
  content: string
  callback?: Function
}

function useMessageBox() {
  return {
    alert(props: MessageBoxProps) {
      const container = document.createElement('div')
      const MessageBoxApp = createApp(MessageBoxComp, { ...props, close })
      open()

      function open() {
        MessageBoxApp.mount(container)
        document.body.appendChild(container)
      }
      function close() {
        MessageBoxApp.unmount()
        container.remove()
        typeof props.callback === 'function' && props.callback()
      }
    }
  }
}

export default useMessageBox()
